<template>
  <div class="search-container" @keyup.enter="getRiskRecordList">
    <div class="title-container">
      <div class="title">风险记录</div>
    </div>
    <div class="statistic">
      <el-statistic title="今日异常数据量" :value="dayRiskRecordNumT">
        <template #title>
          <el-space>
            <span>今日异常数据量</span>
            <svg-icon icon-name="icon-shujuliangshuliang"></svg-icon>
          </el-space>
        </template>
      </el-statistic>
    </div>
    <div class="statistic">
      <el-statistic :value="weekRiskRecordNumT">
        <template #title>
          <el-space>
            <span>本周异常数据量</span>
            <svg-icon icon-name="icon-benzhoushuju" :size="18"></svg-icon>
          </el-space>
        </template>
      </el-statistic>
    </div>
    <el-form :inline="true" size="large" :form="riskRecordSearchForm" class="search-form">
      <el-input
        v-model="riskRecordSearchForm.stationName"
        placeholder="站场"
        :prefix-icon="Search"
      />
      <el-input
        v-model="riskRecordSearchForm.pipelineName"
        placeholder="管线"
        :prefix-icon="Search"
      />
      <el-select
        v-model="riskRecordSearchForm.type"
        placeholder="参数类型"
        multiple
        collapse-tags
        collapse-tags-tooltip
        :max-collapse-tags="5"
      >
        <el-option
          v-for="option in converseOptions"
          :key="option.value"
          :label="option.label"
          :value="option.value"
        />
      </el-select>
      <el-select v-model="riskRecordSearchForm.triggerType" placeholder="触发类型" multiple>
        <el-option label="超出上限" value="1" />
        <el-option label="低于下限" value="-1" />
      </el-select>
      <el-input
        v-model="riskRecordSearchForm.recordTime"
        placeholder="记录时间"
        :prefix-icon="Clock"
      />
      <el-button type="primary" :icon="Search" @click="getRiskRecordList"> 搜索 </el-button>
    </el-form>
  </div>
</template>
<script setup name="RiskRecordSearchCom">
import { Search, Clock } from '@element-plus/icons-vue'
import { converseOptions } from '../options/typeOption'
import { useRiskRecord } from '../hooks/useRiskRecord'
const { dayRiskRecordNumT, weekRiskRecordNumT, getRiskRecordList, riskRecordSearchForm } =
  useRiskRecord()
</script>
<style lang="less" scoped>
.search-container {
  padding: 20px;
  display: grid;
  grid-template-columns: 1fr 2fr 2fr 10fr;
  grid-gap: 10px;
  .title-container {
    position: relative;
    .title {
      position: absolute;
      left: 0;
      top: 0;
      color: #303133;
      font-size: 16px;
      font-weight: bold;
    }
  }
  .statistic {
    flex: 2;
    display: flex;
    justify-content: center;
  }
  .search-form {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, auto);
    grid-gap: 10px;
  }
}
</style>
